<template>
  <div class="wrap" @click="listTodetail">
    <div class="avatar_data">
		<img :src="item.avatar">
		<span>{{item.author}}</span>
		<span>{{item.date}}</span>
	</div>
	<div class="list_title">
		<h2>{{item.title}}</h2>
	</div>
	<div class="list_img">
		<img :src="item.detail_img">
	</div>
	<div class="list_desc">
		<p>{{item.detail_content}}</p>
	</div>
	<div class="view_star">
		<img :src="item.detail_love_image1"><span>{{item.attention_count}}</span>
		<img :src="item.detail_love_image2"><span>{{item.love_count}}</span>
	</div>
  </div>
</template>

<script>
export default {
	name:'listArr',
	props:{
		index:Number,
		item:Object
	},
	mounted(){
		
	},
	methods:{
		listTodetail(){
			wx.navigateTo({ 
				url: '/pages/detail/main?index='+this.index ,
			})
		}
	}
}
</script>

<style scoped>
	.wrap{
		display: flex;
		flex-direction: column;
		border-bottom: 1rpx solid#eee;
	}
	.avatar_data{
		width: 100%;
		padding: 10rpx;
	}
	.avatar_data>img{
		width: 60rpx;
		height: 60rpx;
		border-radius:50% ;
		vertical-align:middle;
	}
	.avatar_data>span{
		margin-left: 10rpx;
		font-size: 28rpx;
		color:#333;
	}
	.list_title{
		padding: 10rpx;
	}
	.list_img{
		width: 100%;
	}
	.list_img>img{
		width: 100%;
	}
	.list_desc>p{
		font-size: 30rpx;
		text-indent: 60rpx;
		line-height: 40rpx;
		overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
		padding:0 10rpx;
	}
	.view_star{
		padding: 10rpx;
	}
	.view_star>img{
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
		vertical-align:middle;
	}
	.view_star>span{
		margin-right: 10rpx;
		font-size: 26rpx;
	}
</style>
